<script setup lang="ts">
import dayjs from 'dayjs';
import { getSysImgUrl } from '/@/utils/index';
interface Props {
  /**
   * 审批列表
   */

  list: FlowPathDto.ApproverDto[];
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
});

/**
 * 审批状态：
 *1: '待审批',
 *2: '同意',
 *3: '拒绝',
 *4: '已撤销',
 */
const APPROVE_STATUS = {
  0: '',
  1: '待审批',
  2: '同意',
  3: '拒绝',
  4: '已撤销',
};
</script>

<template>
  <view class="app-approve-list">
    <view class="app-approve-item" v-for="(item, index) in props.list" :key="item.id">
      <view class="app-approve-item--center">
        <view
          class="app-approve-item__dot"
          :style="{ backgroundColor: item.reviewStatus === 1 ? '#ddd' : '#507aee' }"
        ></view>
        <view
          v-if="index + 1 !== props.list.length"
          class="app-approve-item__line"
          :style="{
            backgroundColor: props.list[index + 1].reviewStatus === 1 ? '#ddd' : '#507aee',
          }"
        ></view>
      </view>
      <view class="app-approve-item--right">
        <view class="app-approve-item__name">
          <text v-if="index === 0">{{ item.approverUserName }}</text>
          <text v-else :style="{ color: item.reviewStatus === 1 ? '#ddd' : '#333' }">{{
            item.approverUserName + ' (' + APPROVE_STATUS[item.reviewStatus || 0] + ')'
          }}</text>
        </view>
        <view v-if="index === 0">
          <text>发起审批</text>
        </view>
        <view v-if="item.opinion">
          <text>审批意见:&nbsp;&nbsp;</text>
          <text>{{ item.opinion }}</text>
        </view>
      </view>
      <view>
        <view v-if="item.updateTime && item.updateTime != 0">
          <text> {{ dayjs(item.updateTime).format('MM-DD HH:mm') }}</text>
        </view>
        <view v-if="item.approverSign">
          <image
            :src="getSysImgUrl(item.approverSign)"
            class="app-approve-item__image"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
